import React, { useState, useEffect } from 'react'
import { useObserver } from 'mobx-react-lite';
import {useLocation,useHistory} from "react-router-dom"
import './Myprofile.scss'
import { IUserInfo} from '../../utils/interface';
const Myprofile: React.FC = () => {

   let [list, setList] = useState<object>(Object)
  let location = useLocation()
  let history  = useHistory()
  useEffect(() => {
     setList((location.state) as object)
  },[])
  //返回上一页
  function back() {
    history.goBack()
  }
  //跳转修改图片
  function goModifyPicture() {
    history.push('/main/modifypicture')
  }
  //跳转修改昵称
  function goModifyName() {
    history.push({
      pathname: '/main/modifyname',
      state: {
        ...list
      }
    })
  }
  //跳转修改手机号
    function goModifyPhone() {
      history.push('/main/modifyphone')
    }
  return useObserver(() => (
    <div className="myprofile"> 
      <div className="head">
        <span onClick={back}>{'<'}</span>
        <h3>个人资料</h3>
      </div>
      <div className="body">
        <div className="picture" onClick={goModifyPicture}>
          <span>头像</span>
          <div>
           <p> <img src={(list as IUserInfo).avatar} alt="" />{'>'}</p>
          </div>
        </div>
        <div className="name" onClick={goModifyName}>
          <span>昵称</span>
          <div>
            <p>{(list as IUserInfo).nickname}{'>'}</p>
          </div>
        </div>
        <div className="phone" onClick={goModifyPhone}>
          <span>手机号</span>
          <div>
            <p>{(list as IUserInfo).mobile}{'>'}</p>
          </div>
        </div>
      </div>
    </div>
  ))
}
export default Myprofile